<template>
    <div class="warehouse">
        <div class="header">
            <span>仓库管理</span>
            <span>仓库管理员不能重复</span>
        </div>
        <div class="tableBody">
            <el-row :gutter="20" v-for="(item,index) in tableData" :key='index'>
                <el-col :span="6">
                    <el-button @click="upDepartmentName(item)" class="btn2" plain style="margin-right:10px">修改名称</el-button>
                    <el-input  v-model="item.wh_name" size='mini' ></el-input>
                </el-col>
                <el-col :span="6">
                    <el-button class="btn2"  @click="bindClass(item,true)"  plain>绑定部门</el-button>
                    <el-button @click="bindClass(item)" class="btn2" plain>{{'查看'}}</el-button>
                </el-col>
                <el-col :span="10" >
                    <div :ref="`cell${index}`" class="content" >
                        <el-button type="primary" class="btn2" @click="addPresons(item.admin,item.id)" plain>绑定仓库管理员</el-button>
                        <el-tag v-for="(tag,idx) in item.admin" style="margin-left:5px"  @close="removePresons(tag)" :key="idx" closable type="info"> {{tag.admin_name}} </el-tag>
                    </div>
                    <el-popover  placement="top"  width="400"   trigger="hover">
                        <el-tag v-for="(ele,idx) in item.admin" @close="removePresons(ele)" :key="idx" type="info" closable style="width:66px;text-align:center;margin:10px;display:inline-block">{{ele.admin_name}} </el-tag>
                        <el-button style="width:30px" slot="reference" v-show="item.show&&item.admin.length>1" type="text" >更多</el-button>
                    </el-popover>
                </el-col>
                 <el-col :span="2">
                    <el-button type="text" @click="deleteDepartment(item)" :disabled="item.wh_is_default==1">删除</el-button>
                </el-col>
            </el-row>
            <el-row :gutter="20" >
                <el-col :span="22">
                </el-col>
                 <el-col :span="2">
                    <el-button type="text" @click="addRepairDepart()" >新增</el-button>
                </el-col>
            </el-row>
            <div class="tip">
                <div>注释： </div>
                <div>
                    <div>1. 如果有分公司，且分公司在不同区域办公才需要增加仓库。如无分公司且员工都在一起办公则无需增加仓库，用默认仓库即可。</div>
                    <div>2. 默认仓库是无法删除的，新增的仓库可以删除，但删除前请移除所有资产和耗材。</div>
                    <div>3. 一个人只能管理一个仓库，仓库管理员不能重复，但可以多选。</div>
                    <div>4. 钉钉主管理员拥有最高权限，且跟随钉钉主管理员进行变更。</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
/* eslint-disable */ 
        /**              获取仓库的部门 */
import {getCategoriesApi,getWarehouseDept, } from "@/api" 
import {
    /**获取仓库列表 */
    getWarehouse,
    /**绑定维修人员 */
    bindWarehouse,
    /**获取资产分类树 */
    getAssetsClassifyTreeFn,
    /**修改仓库名称 */
    modifyWarehouse,
    /**删除仓库 */
    removeWarehouse,
    /**仓库移除管理员 */
    removeAdmin,
    /**新增仓库 */
    insertWarehouse,
    /**仓库绑定部门 */
    bindDept,

} from "../api"
import {complexPicker,departmentsPicker} from "@/libs/utils" /**封装选部门方法 */
export default {
    name:"treeModel",
    data(){
        return {
            tableData:[],
             /**绑定资产类别弹窗 */
            dialogIsShow:false,
            /**资产类别树默认选中 */
            checkedKeys: [],
            /**资产类别树数据 */
            menuItems: [],
            wh_id:'',
            /** */
        }
    },
    created(){
        
    },
    mounted(){
        this.getData()
        let that  = this
        window.addEventListener('resize', function() {
            that.showMore(that.tableData)
        })
    },
    methods:{
        removePresons(data){
            this.$confirm(`即将删除"${data.admin_name}", 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeAdmin({admin_userid:data.admin_userid,aaid:4}).then(res=>{
                    this.getData()
                });
            });
        },
        /**绑定部门 */
        bindClass(data,show){
            let that = this
            getWarehouseDept({id:data.id}).then(res=>{
                let arr = res?res.split(','):[]
                departmentsPicker(this,{pickedDepartments:arr},function (res) {
                    bindDept({departments:JSON.stringify(res.departments),id:data.id}).then(res=>{
                        that.getData()
                    })
                })
            })
        },
         /**获取默认仓库数据 */
        getData(){
            this.checkedKeys = []
            getWarehouse().then(res=>{
                if(res&&res.length){
                    res.forEach(element => {
                        element.show = false
                    });
                }
                this.tableData = res
                this.showMore(res)
            });
        },
                /**如果权限或绑定人员不止显示一行，则显示更多 */
        showMore(val){
            this.tableData = val
            this.$nextTick(()=>{
                if(val&&val.length){
                    val.forEach((element,index) => {
                        log(this.$refs[`cell${index}`][0].scrollHeight)
                        element.show = this.$refs[`cell${index}`][0].scrollHeight>60?true:false
                    });
                }
            })
            this.tableData = val
        },
        /**添加维修人员 */
        addPresons(presonList,id){
            let that = this
            let arr = presonList&&presonList.length?presonList.map(item=>{return item.admin_userid}):[]
            complexPicker(this,{bool:true,useridArr:[],maxUsers:1,disabledUsers:arr},function (res) {
                bindWarehouse({users:JSON.stringify(res.users),id}).then(res=>{
                    that.getData()
                })
            })
        },
        /**修改仓库名称 */
        upDepartmentName(data){
            if(!data.wh_name) return this.$message('仓库名字不能为空');
            modifyWarehouse({id:data.id,wh_name:data.wh_name}).then(res=>{
                this.getData();
            })
        },
        /**移除仓库 */
        deleteDepartment(data){
            this.$confirm(`即将删除"${data.wh_name}", 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeWarehouse({id:data.id}).then(res=>{
                    this.getData()
                });
            });
        },
        /**新增仓库 */
        addRepairDepart(){
            insertWarehouse().then(res=>{
                this.getData();
            })
            
        }
    },
}
</script>

<style lang='stylus' >
.warehouse
    padding 40px
    background-color #fff
    .header
        line-height 50px;
        background-color: rgba(247, 245, 251, 1);
        padding 0 27px 0 66px 
        display flex
        justify-content space-between
        >span 
            color: rgba(25, 31, 37, 1);
            display inline-block
            width 50%
            font-size: 16px;
        >span:last-child 
            padding-left 8%
    .tableBody
        .btn1
            color: rgba(16, 16, 16, 1);
            border: 1px solid rgba(215, 215, 215, 1);
        .btn2
            color: rgba(49, 150, 250, 1);
            border: 1px solid rgba(49, 150, 250, 1);
    .tip
        display flex
        line-height 21px
        margin-top 15px
        >div:first-child 
            width 50px
            text-align right
            font-size: 12px;
            color: rgba(249, 14, 14, 1);
        >div:last-child
            color: rgba(16, 16, 16, 1);
            flex 1
            >div
                font-size: 12px;
</style>
<style lang="stylus">
.warehouse
    .tableBody
        .el-row
            height  50px
            // display flex
            // align-items center
            padding 0 0 0 47px
            overflow hidden
            border: 1px solid rgba(242, 242, 242, 1);
            border-top none
            margin 0 !important
        .el-row:nth-of-type(2n)
            background-color rgb(251,251,253)
        .el-col
            height 50px
            display flex
            justify-content space-between
            line-height 50px
            height: 50px
        .content
            flex 1
            display flex
            height 50px
            flex-wrap wrap 
            align-items center
        .el-input--mini .el-input__inner
            width: 150px;
            height: 30px;
            line-height 30px
            border-radius: 3px;
            background-color: rgba(255, 255, 255, 0);
            color: rgba(16, 16, 16, 1);
            font-size: 12px;
            font-family: Roboto;
        .el-button
            line-height: 30px;
            height 30px
            border-radius: 3px;
            padding 0 8px
            background-color: rgba(255, 255, 255, 0);
            font-size: 12px;
            text-align: center;
            font-family: Roboto;
            margin 10px 0 10px 10px
        .el-button.is-disabled
            color: rgba(170, 170, 170, 1);
        
</style>
